<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/override.css" />
		<style>
			.mui-pull-left {
				color: #fff;
			}
			
			.mui-search input[type=search] {
				width: 260px;
				margin-top: 7px;
				border-radius: 20px;
				margin-left: 12px;
				text-align: left;
			}
			
			#btnSearch {
				color: #fff;
				float: right;
				margin-top: 13px;
			}
			
			.mui-search .mui-placeholder .mui-icon {
				float: left;
				margin-left: 42px;
				margin-top: 2px;
			}
			
			.mui-search.mui-active:before {
				left: 52px;
				top: 67%;
			}
			
			.mui-placeholder span {
				float: left;
				margin-top: 5px;
			}
			
			.mui-input-row .mui-input-clear~.mui-icon-clear {
				right: 60px;
				top: 2px;
			}
			
			.mui-bar-nav~.mui-content {
				padding-top: 24px;
			}
			
			.recent_span {
				margin-left: 20px;
				color: #8f8f94;
				font-size: 16px;
			}
			
			.mui-table-view {
				margin-top: 15px;
			}
			
			.clear_span {
				float: left;
				width: 100%;
				text-align: center;
				background-color: #fff;
				color: #8f8f94;
				font-size: 16px;
				height: 46px;
				line-height: 46px;
			}
			
			.mui-table-view .mui-media-object {
				line-height: 80px;
				max-width: 106px;
				height: 80px;
			}
			
			.mui-table-view-cell {
				font-size: 16px;
				font-family: "微软雅黑";
			}
			
			.span_distance {
				float: left;
				color: #8f8f94;
				font-size: 14px;
				margin-top: 20px;
			}
			
			.deal_deco,
			.deal_price,
			.deal_oldprice {
				color: #ff512f;
				float: right;
				margin-top: 20px;
			}
			
			.deal_price {
				font-size: 20px;
				margin-top: 20px;
			}
			
			.deal_oldprice {
				text-decoration: line-through;
				color: #8f8f94;
				font-size: 14px;
				margin-right: 20px;
				margin-top: 20px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav mui-input-row mui-search">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<input type="search" class="mui-input-clear" placeholder="输入产品id或分类 " id="search_word">
			<span id="btnSearch">搜索</span>
		</header>
		<div class="mui-content">
			<div id="historylist">
				<span class="recent_span">历史搜索</span>
				<ul class="mui-table-view" id="keylist">
				</ul>
				<span class="clear_span" id="clear_span">清除历史记录</span>
			</div>
			
		</div>

		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			var oinput = document.getElementById("search_word");
			var keylist = document.getElementById("keylist");
			document.getElementById("btnSearch").addEventListener("tap", function() {
				//存储搜索关键词
				var kw = {};
				var wordlist = getSearchWord();
				//只保存5条
				if(wordlist.length == 5) {
					//删除最早的一条
					wordlist.shift();
				}
				kw.index = wordlist.length + 1;
				kw.word = oinput.value;
				wordlist.push(kw);
				localStorage.setItem("$keywords", JSON.stringify(wordlist));
			}, false);

			document.getElementById("clear_span").addEventListener("tap", function() {
				localStorage.removeItem("$keywords");
				keylist.innerHTML = "";
			}, false);

			function getSearchWord() {
				var keywords = localStorage.getItem("$keywords") || '[]';
				return JSON.parse(keywords);
			}

			//生成关键词列表
			var keyword_list = getSearchWord();
			var fragment = document.createDocumentFragment();
			for(var i = keyword_list.length - 1; i >= 0; i--) {
				var li = document.createElement("li");
				li.className = "mui-table-view-cell";
				var span = document.createElement("span");
				span.className = "mui-icon mui-icon-compose";
				li.appendChild(span);
				var word = document.createTextNode(keyword_list[i].word);
				li.appendChild(word);
				fragment.appendChild(li);
			}
			keylist.appendChild(fragment);

			
		</script>
	</body>

</html>